<template>
  <div class="">
    <tabbar>
      <tabbar-item link="/home">
        <img slot="icon" src="../../assets/read.png">
        <span slot="label" :class="{'tabbar-item__select': selected === 0}">书架</span>
      </tabbar-item>
      <tabbar-item link="/apps">
        <img slot="icon" src="../../assets/apps.png">
        <span slot="label" :class="{'tabbar-item__select': selected === 1}">分类</span>
      </tabbar-item>
      <tabbar-item link="/rank">
        <img slot="icon" src="../../assets/rank.png">
        <span slot="label" :class="{'tabbar-item__select': selected === 2}">排行</span>
      </tabbar-item>
      <tabbar-item link="/search">
        <img slot="icon" src="../../assets/search.png">
        <span slot="label" :class="{'tabbar-item__select': selected === 3}">搜索</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>
<script>
import { Tabbar, TabbarItem } from 'vux';

export default {
  components: {
    Tabbar,
    TabbarItem
  },
  mounted() {
    this.getUrl();
  },
  data() {
    return {
      selected: 0
    };
  },
  methods: {
    getUrl() {
      this.url = this.$route.name;
      switch (this.url) {
        case 'home':
          this.selected = 0;
          break;
        case 'apps':
          this.selected = 1;
          break;
        case 'rank':
          this.selected = 2;
          break;
        case 'search':
          this.selected = 3;
          break;
        default:
      }
    }
  }
};
</script>
<style lang="scss">
@function r($px) {
  @return ($px / 14 ) + rem;
}
.weui-tabbar{
  background: white;
  max-width: 600px;
  padding-top: (5/14)+rem;
  position: fixed!important;
  bottom: 0;
  left:50%;
  transform: translateX(-50%);
  &__item {
    line-height: 0;
    &.channel {
      .weui-tabbar__icon {
        width: r(22) !important;
        height: r(22) !important;
        margin-bottom: 3px !important;
      }
    }
  }
  &__icon {
    width: r(22) !important;
    height: r(22) !important;
    margin-bottom: 3px !important;
    img {
      vertical-align: middle;
    }
  }
  &__item.avatar {
    .weui-tabbar__icon {
      width: r(24) !important;
      height: r(24) !important;
      margin-bottom: 1px !important;
    }
  }
}
.tabbar-item__select{
  color: rgb(38, 162, 255)!important;
}
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
  color: rgb(38, 162, 255) !important;
}
</style>
